.ngm-theme-light {
  .ngm-copilot-command-button {
    background: linear-gradient(136deg, rgb(151 0 255 / 80%) 0%, rgb(254 0 0 / 80%) 50%, rgb(255 149 0 / 80%) 100%);
    color: white;
    --mdc-icon-button-icon-color: white;
    --mat-icon-color: white;
    
    &.mat-mdc-button-base.mat-mdc-unelevated-button {
      --mdc-filled-button-label-text-color: white;
    }
    &[disabled] {
      opacity: 0.5;
    }
  }
}
.dark {
  .ngm-copilot-command-button {
    background: linear-gradient(136deg, rgb(151 0 255) 0%, rgb(254 0 0) 50%, rgb(255 149 0) 100%);
    color: white;
    --mdc-icon-button-icon-color: white;
    --mat-icon-color: white;

    &.mat-mdc-button-base.mat-mdc-unelevated-button {
      --mdc-filled-button-label-text-color: white;
    }
    &[disabled] {
      opacity: 0.5;
    }
  }
}


@layer components {
  .ngm-btn, .btn {
    @apply flex items-center cursor-pointer rounded-xl px-2
      active:scale-95 origin-bottom transition-all
      disabled:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100
    bg-gray-100 border border-gray-100 hover:border-gray-200;
  }
  .ngm-btn-sm, .btn-sm, .btn-small {
    @apply px-2 h-7 rounded-lg text-sm;
  }
  .btn-primary {
    @apply shadow-md text-components-button-primary-text bg-components-button-primary-bg border-components-button-primary-border;
  }

  .btn-large {
    height: 2.25rem;
    border-radius: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 600;
  }

  .btn-medium {
    height: 2rem;
    border-radius: .5rem;
    padding-left: .875rem;
    padding-right: .875rem;
    font-size: 13px;
  }
  .btn-secondary {
    @apply border-[0.5px] border-[--color-components-button-secondary-border] bg-[--color-components-button-secondary-bg] shadow-sm
      hover:border-[--color-components-button-secondary-border-hover] hover:bg-[--color-components-button-secondary-bg-hover];
  }

  .btn-tertiary {
    @apply bg-gray-200 text-text-tertiary hover:text-text-primary;
  }

  .btn-ghost {
    @apply bg-transparent border-transparent hover:bg-gray-200;
  }

  .action-btn {
    @apply inline-flex cursor-pointer items-center justify-center origin-bottom transition-transform 
      text-text-tertiary disabled:opacity-50 disabled:cursor-not-allowed;
    
    &:not(:disabled) {
      @apply hover:bg-hover-bg hover:text-base-content active:scale-95;

      &.primary {
        @apply hover:bg-primary-50 hover:text-primary-400 active:bg-primary-100 active:text-primary-500;
      }

      &.danger {
        @apply hover:bg-red-50 hover:text-red-500;
      }
    }
  }

  .action-btn-sm {
    @apply rounded-md p-1 h-6;
  }

  .action-btn-md, .action-btn-m {
    @apply rounded-lg p-1.5 h-7;
  }

  .action-btn-active {
    @apply bg-primary-100 text-primary-500;
  }

  .pressable {
    @apply active:scale-95 origin-bottom transition-all;
  }

  .btn {
    &.btn-danger, &.danger {
      @apply text-red-500 border-red-50 hover:border-red-500 hover:bg-red-50;
    }
  }

  .system-xl-semibold {
    @apply text-xl font-semibold;
  }
  .system-sm-semibold {
    @apply text-sm font-semibold;
  }
  .system-sm-regular {
    @apply text-sm;
  }
  .system-xs-regular {
    @apply text-sm;
  }
  .system-xs-medium {
    @apply text-xs font-medium;
  }
}